<template>
    <div class="down-height">
        <div class="top">
            <div class="title">模块访问量</div>
            <el-date-picker
                v-model="valueTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="changeDate">
            </el-date-picker>
        </div>
        <div class="box">
            <div class="watchChart" id="moduleChart"></div>
        </div>
    </div>
</template>
<script>
import { Visits } from 'S/downloadNum';
import { resizeListener } from 'U/echartResize';
export default {
    name: 'timeChart',
    data() {
        return {
            valueTime: '',
        };
    },
    mounted() {
        this.initData();
    },
    methods: {
        changeDate(val) {
            this.valueTime = val;
            this.initData();
        },
        async initData() {
            this.dataAxis = [];
            this.data = [];
            let params = {};
            if (this.valueTime) {
                params = {
                    endTime: this.valueTime[1],
                    startTime: this.valueTime[0]
                };
            }
            let res = await Visits(params);
            if (res.status === 200) {
                res.data.forEach(element => {
                    let itemStyle;
                    if (element.modular_name === '共性产品模块') {
                        itemStyle = {
                            normal: {
                                color: '#FF003B'
                            }
                        };
                    } else if (element.modular_name === '产品列表模块') {
                        itemStyle = {
                            normal: {
                                color: '#FE8D1B'
                            }
                        };
                    } else {
                        itemStyle = {
                            normal: {
                                color: '#0A76DC'
                            }
                        };
                    }
                    this.data.push({ value: element.count, name: element.modular_name, itemStyle: itemStyle });
                });
                this.echartInit();
            }
        },
        echartInit() {
            this.myChart = this.$echarts.init(document.getElementById('moduleChart'));
            this.myChart.setOption({
                legend: {
                    top: 'top'
                },
                tooltip: {
                    trigger: 'item'
                },
                visualMap: {
                    show: false,
                    min: 80,
                    max: 600,
                    inRange: {
                        colorLightness: [0, 1]
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: this.data,
                        roseType: 'radius',
                        label: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        },
                        itemStyle: {
                            normal: {
                                label: {
                                    position: 'outer',
                                    formatter: function (params) {
                                        return params.name + ':' + params.value + '(' + (params.percent - 0) + '%)'; },
                                        textStyle: {
                                            color: '#030E39'
                                    }
                                },
                                labelLine: {
                                    show: true
                                }
                            }
                        },
                    }
                ]
            });
            resizeListener(this.myChart);
        }
    },
    beforeDestroy() {
        if (this.myChart) {
            this.myChart.dispose();
        }
    }
};
</script>